<!--公共头部-->
{template 'aitimt/common/header'}
		<style>
			* {
			    touch-action: pan-y;
			}
			.mui-control-content {
				background-color: white;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{
				background-color:#ff9400;
			}
			.mui-table-view .mui-media-object{
				height: 100px;
				max-width: 130px;
			}
			.mui-bar-nav{
					background-color: #e94709;
			}
			.top-return {
			position: absolute;
			    width: 10%;
				top: 0.1875rem;
					}
					.top-return img{
					     width: 75%;
							}
			.mui-bar-nav .mui-title{
					color: #FFFFFF;
			}

			.top-logo {
			position: absolute;
			    width: 10%;
				left: 28%;
				top: 0.1875rem;
					}
					.top-logo img{
					    width: 90%;
							}
			.top-menu {
			position: absolute;
				width: 10%;
				right: 5%;
				top: 0.1875rem;
					}
					.top-menu img{
						 width: 75%;
							}

		/* 公共部分end */
				.item-content{
					margin-top:2.75rem ;
				}
				.item-content img{
					width: 100%;
				}
				.item-content .item-title{
					font-size: 20px;
					color: #000000;
					    font-weight: 600;
						margin-left: 5%;
				}
				.item-content .item-price{
					font-size: 25px;
					color: #ff1600;
					float: right;
					margin-right: 5%;
				}

				.item-content .item-price .item-qi{
					font-size: 10px;
					color: #595757;
				}
			.item-content .item-addtime {
				font-size: 10px;
				color: #595757;
				margin-left: 5%;
			}
			.item-content .item-txt {
				margin-top: 0.9375rem;
			}
				.item-content .item-addtime p{
					font-size: 10px;
					color: #595757;
				}
			.mui-table-view .mui-media, .mui-table-view .mui-media-body{
				line-height: 2rem;
			}
			.mui-slider-indicator.mui-segmented-control .mui-control-item {
				border-left:1px solid #c1c1c1 ;
				border-bottom:1px solid #c1c1c1 ;
				padding: 1px;
				color: #585858;
			}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
				border-bottom:3px solid #e94709 ;
				color: #585858;
			}
			.addtime{
				padding-top: 10px;
				font-size: 10px;
			}
			.mui-bar-nav~.mui-content{
				padding: 0;
			}
			.mui-media-body{
				text-align: center;
				    line-height: 25px;
				    margin-top: 20px;
			}
			.mui-bar-tab .mui-tab-item{
				color: #555657;
				border-right: 1px solid #ececec;
			}
			.mui-bar-tab .mui-tab-item.mui-active{
				color: #555657;
			}
			.mui-bar-tab{
				background: #FFFFFF;
			}
			.baoming{
				background: #e94709;
			}
			.baoming span{
				color: #FFFFFF;
			}
			.mui-scroll{
				position: unset;
				margin-bottom: 15%;
				padding: 0 5%;
			}
		</style>
		<!-- 公共头部start -->
		<header class="mui-bar mui-bar-nav">
			<a class="top-return mui-action-back"><img src="{aide_URL}template/mobile/aitimt/images/return.png" ></a>
			<a class="top-logo"><img src="{aide_URL}template/mobile/aitimt/images/logo.png" ></a>
			<h1 class="mui-title">
					Aitimt 爱计时</h1>
			<a href="#popover" id="openPopover" class="top-menu" ><img src="{aide_URL}template/mobile/aitimt/images/menu.png" ></a>
			<div id="popover" class="mui-popover">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell"><a href="#">Item1</a></li>
					<li class="mui-table-view-cell"><a href="#">Item2</a></li>
					<li class="mui-table-view-cell"><a href="#">Item3</a></li>
					<li class="mui-table-view-cell"><a href="#">Item4</a></li>
					<li class="mui-table-view-cell"><a href="#">Item5</a></li>
				</ul>
			</div>
		</header>
		<!-- 公共头部end -->
		<div class="item-content" style="background-color:#fff">
		                <img src="{php echo tomedia($activity[0]['thumb'])}">
						<p class="item-txt">
						<span class="item-title">{$activity[0]['title']}</span>
							{if $activity[0]['quota']==0}
							<span class="item-price">免费</span>
							{else}
							<span class="item-price">￥{$activity[0]['quota']}<span class="item-qi">起</span></span>
							{/if}
						</p>

						<span class="item-addtime">
							<p class=' mui-icon iconfont icon-riqi'>{$activity[0]['starttime']}</p>
							<p class=' mui-icon iconfont icon-didian'>{$activity[0]['address']}</p><br>
							<span style="margin-left: 5%;">报名时间:{$activity[0]['joinstime']}至{$activity[0]['joinetime']}</span>
						</span>
		</div>
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">赛事详情</a>
					<a class="mui-control-item" href="#item2mobile">报名项目</a>
					<a class="mui-control-item" href="#item3mobile">评论</a>
				</div>
				<!-- <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div> -->
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
							<div class="mui-scroll">
												{$activity[0]['detail']}
							</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
							<div class="mui-scroll">
											<div class="mui-media-body">
												{$activity[0]['info']}
											</div>
							</div>

					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
							<div class="mui-scroll">
<!--									<ul class="mui-table-view">-->
<!--									<li class="mui-table-view-cell mui-media">-->
<!--											<img class="mui-media-object mui-pull-left" style="max-width: 50px;height: 50px;" src="images/shuijiao.jpg">-->
<!--											<div class="mui-media-body">-->
<!--												<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>-->
<!--											</div>-->
<!--									</li>-->
<!--									<li class="mui-table-view-cell mui-media">-->
<!--											<img class="mui-media-object mui-pull-left" style="max-width: 50px;height: 50px;" src="images/shuijiao.jpg">-->
<!--											<div class="mui-media-body">-->
<!--												<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>-->
<!--											</div>-->
<!--									</li>-->
<!--									<li class="mui-table-view-cell mui-media">-->
<!--											<img class="mui-media-object mui-pull-left" style="max-width: 50px;height: 50px;" src="images/shuijiao.jpg">-->
<!--											<div class="mui-media-body">-->
<!--												<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>-->
<!--											</div>-->
<!--									</li>-->
<!--									<li class="mui-table-view-cell mui-media">-->
<!--											<img class="mui-media-object mui-pull-left" style="max-width: 50px;height: 50px;" src="images/shuijiao.jpg">-->
<!--											<div class="mui-media-body">-->
<!--												<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>-->
<!--											</div>-->
<!--									</li>-->
<!--									</ul>-->
								</div>
					</div>
				</div>
			</div>
		</div>
	<a id="scrollToTop" class="backTop "> <span class="mui-icon mui-icon-arrowup"></span> </a>
		<!-- 报名底部start -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" href="#tabbar">
				<span class="mui-tab-label">提醒</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-tab-label">关注</span>
			</a>
			<a class="mui-tab-item" href="noquery.html">
				<span class="mui-tab-label">报名查询</span>
			</a>
			{if $activity[0]['quota']==0}
			<a class="mui-tab-item baoming" href="{php echo app_url('home/index/free').'&activityid='. $activity[0]['id']}">
				<span class="mui-tab-label">立即报名</span>
			</a>
			{else}
			<a class="mui-tab-item baoming"href="{php echo app_url('home/index/pay').'&activityid='. $activity[0]['id']}">
				<span class="mui-tab-label">立即报名</span>
			</a>
			{/if}
		</nav>

		<!-- 报名底部end -->
		<script type="text/javascript">
			var scrollToTopBox = document.getElementById('scrollToTop'); //返回按钮tap
			scrollToTopBox.onclick=function goTop(){
				mui.scrollTo(0,300)

				}
				mui('.mui-bar').on('tap','a',function(){
					document.location.href=this.href;
				})

		</script>

	</body>

</html>
